<template>
	<div class="Custom">
		<div class="Custom-head">
			<div></div>
			<div class="head-title">充值价格</div>
		</div>
		<el-button icon="el-icon-circle-plus" round @click="dialogFormVisible = true">添加</el-button>
		<el-table
			:data="tableData"
			border
			style="width: 100%">
			<el-table-column
				prop="name"
				label="名称">
			</el-table-column>
			<el-table-column
				prop="describe"
				label="描述"
				width="180">
			</el-table-column>
			<el-table-column
				prop="currentPrice"
				label="现价">
			</el-table-column>
			<el-table-column
				prop="costPrice"
				label="原价">
			</el-table-column>
			<el-table-column
				prop="second"
				label="次数">
			</el-table-column>
			<el-table-column
				min-width="100"
				prop="ifInfinite"
				label="是否无限次">
			</el-table-column>
			<el-table-column
				width="130"
				prop="ifShortSale"
				label="是否即将售空">
			</el-table-column>
			<el-table-column
				min-width="130"
				prop="activitySchedule"
				label="默认活动进度">
			</el-table-column>
			<el-table-column
			 	min-width="130"
				prop="bottomPrice"
				label="历史最低价天数">
			</el-table-column>
			<el-table-column
				prop="serialNumber"
				label="序号">
			</el-table-column>
			<el-table-column label="操作" width="150">
				<template slot-scope="scope">
					<el-button
						size="mini"
						type="primary" plain
						@click="editRule(scope.$index)"
					>编辑</el-button>
					<el-button
						size="mini"
						type="danger" plain
						@click="deleted(scope.$index)"
					>删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 编辑对话框 -->
		<el-dialog title="修改" :visible.sync="dialogFormVisible" width="40%" top="8vh" @close="quxiaoRevise">
			<el-form :model="form" v-loading="formloading">
				<el-form-item label="名称" label-width="30%">
					<el-input v-model="form.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="描述" label-width="30%">
					<el-input v-model="form.describe" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="现价" label-width="30%">
					<el-input type="number" v-model="form.currentPrice" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="原价" label-width="30%">
					<el-input type="number" v-model="form.costPrice" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="是否无限次" label-width="30%">
					<el-radio v-model="form.ifInfinite" label='是'>是</el-radio>
  					<el-radio v-model="form.ifInfinite" label='否'>否</el-radio>
				</el-form-item>
				<el-form-item label="次数" label-width="30%">
					<el-input type="number" :disabled="form.ifInfinite == '是'" v-model="form.second" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="是否即将售空" label-width="30%">
					<el-radio v-model="form.ifShortSale" label='是'>是</el-radio>
  					<el-radio v-model="form.ifShortSale" label='否'>否</el-radio>
				</el-form-item>
				<el-form-item label="默认活动进度" label-width="30%">
					<el-input type="number" :disabled="form.ifShortSale == '是'" v-model="form.activitySchedule" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="历史最低价天数" label-width="30%">
					<el-input type="number" v-model="form.bottomPrice" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="序号(数字越大越靠前)" label-width="30%">
					<el-input type="number" @input="jiantingInp" v-model="form.serialNumber" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="quxiaoRevise">取 消</el-button>
				<el-button type="primary" @click="toRevise">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name:'Custom',
		data(){
			return{
				tableData:[],
				dialogFormVisible:false,
				formloading:false,
				form:{
					name: '',
					describe: '',
					currentPrice: '',
					costPrice: '',
					second: '',
					ifInfinite: '',
					ifShortSale: '',
					activitySchedule: '',
					bottomPrice: '',
					serialNumber:''
				}
			}
		},
		methods:{
			jiantingInp(){
				if(this.form.serialNumber>0){
					this.form.serialNumber = parseInt(this.form.serialNumber)
				}
			},
			getList(){
				this.$http.get('getCustomPrice').then((data)=>{
					if(data.data.success){
						this.tableData = data.data.data.tableData;
						this.tableData.forEach((v,i)=> {
							v.activitySchedule += '%';
						});
					}else{
						var num = data.data.msg.length;
						if ( num>1 ) this.$message({
							showClose: true,
							message: data.data.msg,
							type: 'error',
							offset:'65',
							duration:1000
						});
					}
				})
			},
			editRule(x){
				this.form = this.tableData[x];
				if(this.form.activitySchedule[this.form.activitySchedule.length - 1] == '%'){
					this.form.activitySchedule = this.form.activitySchedule.substring(0, this.form.activitySchedule.length - 1);
				}
				this.dialogFormVisible = true;
			},
			toRevise(){
				this.formloading = true;
				this.$http.post('reviseAddCustomPrice',this.form).then((data)=>{
					if(data.data.success){
						this.$message({
							type: 'success',
							message: data.data.msg,
							offset:'65',
							duration:1000
						});
						this.getList()
					}else{
						this.$message.error(data.data.msg)
					}
					this.formloading = false;
					this.dialogFormVisible = false;
					this.form={
						name: '',
						describe: '',
						currentPrice: '',
						costPrice: '',
						second: '',
						ifInfinite: '',
						ifShortSale: '',
						activitySchedule: '',
						bottomPrice: ''
					}
				})
			},
			quxiaoRevise(){
				if(this.form.activitySchedule[this.form.activitySchedule.length - 1] != '%'){
					this.form.activitySchedule += '%';
				}
				this.dialogFormVisible = false;
				this.form={
					name: '',
					describe: '',
					currentPrice: '',
					costPrice: '',
					second: '',
					ifInfinite: '',
					ifShortSale: '',
					activitySchedule: '',
					bottomPrice: ''
				}
			},
			deleted(x){
				var ruleId = this.tableData[x].id;
				this.$confirm('删除该规则, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.post('deletedCustomPrice',{ruleId}).then((data)=>{
						if(data.data.success){
							this.$message({
								type: 'success',
								message: data.data.msg,
								offset:'65',
								duration:1000
							});
							this.getList()
						}else{
							this.$message.error(data.data.msg)
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
						offset:'65',
						duration:1000
					});          
				});
			}	
		},
		created(){
			this.getList()
		}
	}
</script>

<style scoped>
	.Custom-head{
		height: 30px;
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}
	.Custom-head>div:nth-child(1){
		width: 4px;
		height: 20px;
		background-color: #2ad199;
		margin-right: 10px;
	}
	
	.Custom>.el-button{
		background-color: #1870FF;
		color: #FFFFFF;
		margin-bottom: 20px;
	}
</style>
